<template>
  <div id="box">
    <span>km/h</span>
    <div id="track-chart">

    </div>
    <div id="drag-play">
      <dragControl id="drag-control"/>
      <playControl id="play-control" @playAction="onPlayActionChange"/>
    </div>
  </div>
</template>

<script>
  import dragControl from './drag-control.vue'
  import playControl from './play-control.vue'
  export default {
    name: 'SingleHistoryAxis',
    data () {
      return {
        trackChart: null,
      }
    },
    props: {
      XData: {
        type: Array
      },
      YData: {
        type: Array
      }
    },
    mounted(){
      this.$nextTick(() => {
        this.trackChart = echarts.init(document.getElementById('track-chart'));
      })
    },
    components: {
      dragControl,
      playControl,
    },
    methods: {
      drawTrackChart(){
        this.trackChart.setOption({
          backgroundColor: 'rgba(7, 34, 31, 0.5)',
          title: {
            text: '',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis',
            formatter: "时间 : {b} <br/>{a}: {c} (km/h)"
          },
          legend: {
            data: []
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: false, readOnly: false},
              restore: {show: false},
              saveAsImage: {show: false}
            }
          },
          grid: {
            x: 35,
            x2: 5,
            y: 20,
            y2: 10,
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              offset: '20',
//              data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00'],
              data: Object.values(this.XData),
              //data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00','09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00','18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
              axisTick: {
                length: 3,
                lineStyle: {
                  color: '#467492',
                  opacity: '0.8'
                }
              },
              axisLabel: {
//                inside: true,
                offset: '20'
              },
              axisLine: {
                lineStyle: {
                  color: '#467492'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#467492',
                  opacity: '0.2'
                }
              },//去除网格线
            }
          ],
          yAxis: [
            {
              type: 'value',
//              name: 'km/h',
              nameTextStyle: {
                color: '#d6e0f2',
                align:'right',
              },
              nameLocation: 'end',
              nameGap: '10',
              axisTick: {
                length: 2,
                inside: true,
                lineStyle: {
                  color: '#467492',
                  opacity: '0.8'
                }
              },
              axisLabel: {
                inside: false,
                color: '#d6e0f2'
              },
              axisLine: {
                lineStyle: {
                  color: '#467492'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['rgba(70,116,146,0.20)'],
//                  opacity: '0.2'
                }
              },//去除网格线
            }
          ],
          series: [
            {
              name: '车速',
              type: 'line',
              smooth: true,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#467492'
                  }, {
                    offset: 1,
                    color: '#052323'
                  }])
                }
              },
              itemStyle: {
                normal: {
                  color: '#467492',
                  areaStyle: {type: 'default', color: '#467492', opacity: 0.2},
                  lineStyle: {type: 'solid', color: '#467492', width: 3}
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'outside',
                  formatter: '{c}km/h'
                }
              },
//              data: [10, 12, 21, 134, 26, 43, 26, 40, 110]
              data: Object.values(this.YData)
            }
          ]
        })
      },
      onPlayActionChange(data) {
      },
    },
    watch:{
      XData(val){
        if(val.length > 0){
          this.drawTrackChart();
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../../static/common/common";

  #box {
    pointer-events: auto;
    position: absolute;
    left: calc(50% - 515px);
    bottom: 35px;
    z-index: 200;
    width: 1030px;
    height: 180px;
    #track-chart {
      width: 100%;
      height: 100%;
    }
    &>span{
      position: absolute;
      top: 20px;
      left: 42px;
      z-index: 200;
      color: $font-color-normal;
    }
  }
</style>
